<template>
  <section class="ddt">
    <div class="permission-left">
      <h4>● 调度台</h4>
      <a-tree
        :replaceFields="ddtreplaceFields"
        :tree-data="ddttreeData"
        @select="onSelectddt"
      >
      </a-tree>
    </div>
    <div class="permission-right clear">
      <section class="ddtselect">
        <a
          href="javascript:;"
          class="mr20"
          :class="ddtkey == '1' ? 'active' : ''"
          @click="ddtselectJWorQY('ORG-002', '1')"
          >警务</a
        >
        <a
          href="javascript:;"
          :class="ddtkey == '1' ? '' : 'active'"
          @click="ddtselectJWorQY('ORG-005', '2')"
          >企业</a
        >
      </section>
      <section>
        <span
          class="permission-list"
          v-for="(item, index) in rightshowlist"
          :key="index"
          v-if="item.orgCode == rightshowflag"
        >
          <span
            ><img src="@/image/diannao.png" v-if="item.lineFlag == 1" />
            <img src="@/image/diannao_weixuan.png" v-else />

            <Dropdown>
              <span class="permission-list-item-name">{{ item.dptName }}</span>
              <a-menu slot="overlay">
                <a-menu-item @click="editDpt(item)"> 编辑 </a-menu-item>
                <a-menu-item @click="deleteItem(item)"> 删除 </a-menu-item>
              </a-menu>
            </Dropdown>
          </span>
        </span>
      </section>
    </div>
    <edit-dpt ref="editDpt" @handleOk="handleOk"></edit-dpt>
  </section>
</template>

<script>
import { Dropdown } from "ant-design-vue";
import editDpt from "./editDpt.vue";
import {message} from 'ant-design-vue'
import { mapState } from 'vuex'
//管理员设置
export default {
  data() {
    return {
      //调度台设置
      ddtkey: "1", //警务还是企业
      ddtcheckedKeys: [], //选择到的树状结构的code
      ddtcheckedlist: [], //选择到的树状结构的code对应的带子节点的梳妆数据
      ddttreeData: [], //整个树状结构
      rightshowlist: [], //右边显示的数据
      rightshowflag: "ORG-002", //右边显示的数据
      ddtfieldNames: {
        label: "dptName",
        value: "dptCode",
        children: "subDptList",
      },

      ddtuserOprInfo: {
        userCode: "",
        userPassword: "",
        userRealName: "",
        userMobile: "",
        dptCode: "",
        dptName: "",
        dptParentCode: "",
        comParentCode: "",
        dptFlag: "", //  1 部门 -警务   0企业 -公司
      },
      ddtreplaceFields: {
        //替换原来数据
        children: "subDptList",
        title: "dptName",
        key: "dptCode",
      },
      ddtvisible: false,

      ddtrules: {
        //调度台控制
        userCode: {
          required: true,
          message: "账号不能为空",
        },
        userPassword: {
          required: true,
          message: "密码不能为空",
        },
        userRealName: {
          required: true,
          message: "负责人名称不能为空",
        },
        userMobile: {
          required: true,
          message: "负责人电话不能为空",
        },

        dptName: {
          required: true,
          message: "单位名称不能为空",
        },
        dptParentCode: {
          required: true,
          message: "上级部门不能为空",
        },
        dptFlag: {
          required: true,
          message: "选项不能为空",
        },
      },
    };
  },
  components: {
    Dropdown,
    editDpt,
  },
  mounted() {
    //调度台管理
    // this.getDptList();
  },
  computed: {
    ...mapState(['opt']),
  },
  methods: {
    editDpt(item) {
      this.$refs["editDpt"].init(item);
    },
    handleOk() {
      // message.success("修改成功");
      this.getDptList();
    },
    deleteItem({ dptCode }) {
      this.$post("/exter/manage/deleteManageLevelOne", { dptCode }).then(
        (res) => {
          if (res.base.successCode == 0) {
            // message.success("删除成功");
            this.getDptList();
          }
        }
      );
    },
    // huafen
    //调度台
    ddtaddonChange(value) {
      console.log(value);
      this.ddtuserOprInfo.comParentCode = value[0];
      this.ddtuserOprInfo.dptParentCode = value[value.length - 1];
    },

    cancelformddt() {
      this.ddtuserOprInfo = {
        personOrgName: "",
        personOrgCode: "",
        personPostCode: "",
        personPostName: "",
        userRealName: "",
        userMobile: "",
        addFlag: "",
        userCode: "",
      };
    },
    handleDptUserSaveddt() {
      console.log(this.ddtuserOprInfo);
      this.$refs["ddtruleForm"].validate((valid) => {
        if (valid) {
          this.$post(
            "/exter/manage/addManageLevelOne",
            this.ddtuserOprInfo
          ).then(() => {
            this.ddtvisible = false;
            this.cancelformddt();
            this.getDptList();
          });
        }
      });
    },
    ddtselectJWorQY(code, ddtkey) {
      this.ddtkey = ddtkey;
      this.rightshowflag = code;
    },

    ddtselect(dptCode, ddttreedata) {
      for (let index = 0; index < ddttreedata.length; index++) {
        const element = ddttreedata[index];
        if (dptCode == element.dptCode) {
          this.ddtcheckedlist = element;
          return;
        } else {
          this.ddtselect(dptCode, element.subDptList);
        }
      }
    },

    onSelectddt(selectedKeys) {
      this.rightshowlist = [];
      this.ddtcheckedKeys = selectedKeys;
      this.ddtselect(this.ddtcheckedKeys, this.ddttreeData);
      this.ddtrightdigui([this.ddtcheckedlist]);
      this.$emit("onSelectddt", selectedKeys);
      this.$forceUpdate();
    },
    ddtrightdigui(list) {
      for (let index = 0; index < list.length; index++) {
        const element = list[index];
        this.rightshowlist.push({
          dptCode: element.dptCode,
          dptName: element.dptName,
          orgCode: element.orgCode,
          dptParentCode: element.dptParentCode,
        });
        if (element.subDptList.length > 0) {
          this.ddtrightdigui(element.subDptList);
        }
      }
    },
    getDptList() {
      this.ddttreeData = [];
      //  1保安 2警察  9 所有 6自建
      this.$post("/exter/manage/getDptList", {
        paramVar: 9,
      }).then((result) => {
        this.ddttreeData.push(result.buss[0]);
        if (this.ddtcheckedKeys.length > 0) {
          this.onSelectddt(this.ddtcheckedKeys);
        }
        this.$forceUpdate();
      });
    },
  },
};
</script>

<style scoped lang='less'>
.index-info {
  color: white;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 40px;
  margin: 0 auto;
  background: #0a2d67;
  > div {
    width: 100%;
  }
  //调度台
  .ddt {
    .ddtselect {
      padding: 30px 30px 30px 10px;
      a {
        color: #fff;
      }
      .active {
        color: #2deffe;
      }
    }
    .permission-list {
      display: inline-block;
      margin: 6px;
      width: 150px;
      height: 40px;
      overflow: hidden;
      text-align: left;
      .permission-list-item-name {
        cursor: pointer;
      }
    }
  }

  //人员管理
  .ry,
  .ddt {
    .permission-left {
      float: left;
      width: 15%;
      height: 80vh;
      overflow: auto;
      background: #1d4292;
      font-size: 14px;
      h4 {
        margin-top: 10px;
        background: #0c356d;
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
        color: #fff;
      }
      .search-wz {
        position: relative;
      }
      .renyuan-dpt-list {
        li {
          margin: 6px 0;
          padding: 4px 0;
          padding-left: 20px;
        }
        li:hover {
          background: #2ce0ef;
          cursor: pointer;
        }
        .actived {
          background: #2ce0ef;
        }
      }
    }
    .permission-right {
      float: right;
      width: 84%;
      height: 80vh;
      overflow: auto;
      background: #1d4292;

      .permission-info {
        float: left;
        margin: 15px 10px 15px 15px;
        padding: 20px;
        background: #3258e9;
        width: 280px;
        border-radius: 10px;
        .name {
          float: left;
          width: 50%;
          word-wrap: break-word;
        }
        .touxiang {
          width: 40%;
          float: right;
          img {
            margin: 0 auto;
            display: block;
          }
          p {
            margin-top: 5px;
            text-align: center;
          }
        }
        .but1 {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
